import React, {useEffect, useState} from 'react';
import {Link, useHistory} from "react-router-dom";
import {Modal,List, Button, Toast,PullToRefresh} from 'antd-mobile';

import Txt from "../../../components/txt/Txt";
import { dateFormat } from "../../../model/code";

import './recordUserList.less';
import man from '../../../libs/img/user/man.png';
import woman from '../../../libs/img/user/woman.png';
import http from "../../../model/http"; 
import Header from "../../../components/header/Header";
let page = 1;
const h = document.documentElement.clientHeight - 40;

function UserList() { 

   
    
    const history = useHistory();
    const [list,setList] = useState([]);
    
    const [visible,setVisible] = useState(false);
    // recording_path
    // 
    const [recording_path,setRecording_path] = useState();


    const [load,setLoad] = useState(false);
    const [listCount,setListCount] = useState(0)
    const getList = ()=>{
        (async ()=>{
        setLoad(true);

        // http://wxwork.gzsg.cn/wxwork/feedback/wxworkFeedbackRecordVoiceCustomerList?userId=SG01016&hosId=1&managerId=1000920
        //&begintime=2022-03-20    &endtime=2022-03-22&    fromType=sghu    &caller=%E5%BC%A0%E7%B4%AB%E7%87%95&   page=1   &items=10
        const _list = await http.get('/feedback/wxworkFeedbackRecordVoiceCustomerList',{
            // flag:history.location.state.flag, 
            begintime:  dateFormat(history.location.state.begintime,'yyyy-MM-dd')  ,
            endtime:  dateFormat( history.location.state.endtime,'yyyy-MM-dd')   ,    
            fromType:history.location.state.fromType,
            caller:history.location.state.caller,
            page:page,
            items:10
        })
        setTimeout(()=>{setLoad(false)},800)
        setListCount(_list.allcount)
        if(!_list.data.length) return;
        page++;
        setList([...list,..._list.data]);
        })()
        
    }
    

    useEffect(()=>{  
   
    //   setList(data)

        list.length || getList();

        return ()=>{
        page=1
        }
        // eslint-disable-next-line
    },[])
      
    const toDeails=(item)=>{
       history.push(`/user/details?isBind=${1}&outUserId=${item.id}&entryIsHome=${1}`, {
        customerCrmId:item.id
       }); //跳转到客户详情页面
    }

    const openModal =(item)=>{
        setRecording_path(item.recording_path)
        setVisible(true)
    }

    const closeModel= ()=>{
        setRecording_path()
        setVisible(false)
    }
    // const row = (rowData, sectionID, rowID) => {
    //     return (
    //         <div key={rowID} className='userList-row g-flex g-x-between g-mt32'
    //              onClick={toDeails.bind(this,rowData,outUserId,isBindOutUesr)}
    //              style={{padding: '0.25rem 0.2rem', backgroundColor: '#FFFFFF'}}>
    //                 <div className=' g-flex' >
    //                     <img src={rowData.sex=='1'?woman:man} style={{width:'1rem',height:'1rem'}} className='g-round' alt="UserImg"/>
    //                     <div className='g-ml20 g-f24 g-c-999'>
    //                         <p className='g-f30 g-c-333 '>
    //                             <span style={{fontSize:'0.32rem',fontWeight:'bold'}}>{rowData?.customerName}</span>
    //                         </p>
    //                         {/*<p className='g-f26 g-mt15'>顾客id：<span className='g-f24'>{rowData?.customerCrmId}</span></p>*/}
    //                         <p className='g-mt24'>卡号：<span>{rowData?.mzcode}</span></p>
    //                         <p className='g-mt12' style={{lineHeight:'0.4rem'}}>所属咨询：{rowData?.xcname}</p>
    //                         <p className='g-mt12' style={{lineHeight:'0.4rem'}}>开发人：{rowData?.dwname}</p>
    //                         {/*<p className='g-f30 g-mt10'> <span style={{ color: '#FF6E27' }}>{parseInt(rowID) +1}</span></p>*/}
    //                     </div>
    //                 </div>
    //         </div>
    //     );
    // };

    return (
        <div className='v-user-userHomeList'>
            <div className='body-background-div'></div>
            <Modal popup style={{height:"80px"}}
                visible={visible}
                animationType='slide-up'
                onClose={() => { closeModel() }}>
                 <audio
                    style={{height:'40px',marginTop:'18px'}}
                    src={recording_path}  
                    autoPlay={false}
                    controls={true}
                />
            </Modal>
            <PullToRefresh direction='up' onRefresh={getList} refreshing={load} style={{height:h, overflow:'auto'}}>
                 
                {list.map((item,idx)=>(
                    <div key={idx} className='userList-row g-flex g-x-between g-mt32'
                   
                    style={{padding: '0.25rem 0.2rem', backgroundColor: '#FFFFFF'}}>
                       <div className='layout'>
                            <div className='g-flex' >
                                    <img src={item.sex=='1'?woman:man} style={{width:'1rem',height:'1rem'}} className='g-round' alt="UserImg"/>
                                    <div className='g-ml20 g-f24 g-c-999'>
                                        <p className='g-f30 g-c-333 '>
                                            <span style={{fontSize:'0.32rem',fontWeight:'bold'}}>{item?.customerName}</span>
                                        </p> 
                                        <p className='g-mt24'>卡号：<span>{item?.mzcode}</span></p>
                                        <p className='g-mt12' style={{lineHeight:'0.4rem'}}>所属咨询：{item.consultMan?item.consultMan:'暂无'}</p>
                                        <p className='g-mt12' style={{lineHeight:'0.4rem'}}>开发人：{item.developer?item.developer:'暂无'}</p> 
                                    </div>
                                
                                </div> 
                                <div  className='jumpBtn'>
                                        <Button color='primary'  onClick={toDeails.bind(this,item)}  style={{  border: '1px solid green',fontSize:'14px' ,height:'30px' ,lineHeight:'30px',width:'120px',color:"green" }}>查看详情</Button>
                                        <Button color='success' onClick={ openModal.bind(this,item) }  style={{ border: '1px solid blue',fontSize:'14px' ,height:'30px' ,lineHeight:'30px',width:'120px',marginLeft:"50px",color:"blue" }}>{item.record_duration?item.record_duration:"0"}秒</Button>      
                                </div>
                                {/* <div  className='jumpBtn'>
                                <audio
                                    style={{height:'40px'}}
                                    src={item.recording_path}  
                                    autoPlay={false}
                                    controls={true}
                                />

                                </div> */}

                                
                       </div>      
                    </div>
                    
                ))}
                {list.length >= listCount? <div className='test-color'>暂无更多数据</div> : ''}
            </PullToRefresh>
            
            <Header/>
            
            {
                // list.length>0&& (
                // <div style={{marginTop:'0.32rem'}}> 
                //     <ListView
                //         dataSource={dataSource}
                //         renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                //             {
                //                 !hasMore?'加载完毕，没有更多数据了~':(
                //                     isLoading && 'Loading...'
                //                 )
                //             }
                //         </div>)}
                //         renderRow={row}
                //         useBodyScroll
                //         onEndReachedThreshold={100}
                //         onEndReached={onEndReached}
                //         pageSize={10}
                //     />
                // </div>
                // )
            }

        </div>
    )
}
export default UserList;

// "customerCrmId": "20160504020458953000", 
// "sex": 1, 
// "xcname": "高慧清", 
// "dwname": "王进福", 
// "mzcode": "160215111", 
// "age": 21, 
// "customerCrmName": "李甜"